<template>
  <div>
    <div v-if='translateRecordSize === 0' class='no-init-layer'>
      <el-result class='none-select' title='当前还没有翻译记录'>
        <template #icon>
          <el-icon style='width: 70px'>
            <Promotion />
          </el-icon>
        </template>
      </el-result>
    </div>
    <div v-else class='translate-history'>
      <span class="prompt-span form-switch-span none-select">
        记录总数：{{ translateRecordSize }}
      </span>
      <div class="translate-service-layer">
        <div class="translate-service-div-block">
          <ul class="translate-service-list-block">
            <el-scrollbar>
              <div v-for="(element, key) in translateRecordList" :key="key">
                <li
                  class="translate-service-block cursor-pointer none-select"
                  :class="{ active: translateRecordThis.requestId === element.requestId }"
                  @click="selectTranslateRecord(element)"
                >
                  <a class="translate-service-block none-select translate-service-expansion-block">
                    <div class="left">
                      <span class="translate-service-name none-select">
                        {{ element.translateContent }}
                      </span>
                    </div>
                  </a>
                </li>
              </div>
            </el-scrollbar>
          </ul>
          <div class="translate-service-edit">
            <div class="translate-service-edit-button">
              <el-button :icon="Refresh" size="small" @click="translateRecordListRefresh" />
            </div>
            <div class="translate-service-edit-button">
              <el-popconfirm
                width="220"
                icon-color="#53b21e"
                title="确认删除此记录吗?"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="deleteTranslateHistory"
              >
                <template #reference>
                  <el-button :icon="Minus" size="small" />
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>

        <history-result-content :translate-record='translateRecordThis' />

      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import {
  getTranslateRecordList,
  getTranslateRecordSize,
  updateTranslateRecordList
} from '../../../../utils/translateRecordUtil'
import HistoryResultContent from '../history/HistoryResultContent.vue'
import { Minus, Refresh } from '@element-plus/icons-vue'
import { isNull } from '../../../../../../common/utils/validate'
import TranslateRecordVo from '../../../../../../common/class/TranslateRecordVo'

// 翻译记录列表
const translateRecordList = ref()
// 翻译记录数
const translateRecordSize = ref()
// 当前选择的翻译记录
const translateRecordThis = ref(new TranslateRecordVo())
// 当前选择的翻译记录 - 翻译结果列表
const translateServiceRecordList = ref()

// 初始加载数据
const init = (): void => {
  translateRecordList.value = getTranslateRecordList().slice().reverse()
  translateRecordSize.value = getTranslateRecordSize()
}

// 初始加载数据
init()

// 设置窗口获取焦点事件
window.api.setWinFocusEvent(() => {
  const isNotRecord = translateRecordSize.value === 0
  init()
  // 如果一开始获取到的记录是0条 数据加载完毕后大于0条的情况下需要触发选择第一条数据
  if (isNotRecord && translateRecordSize.value > 0) {
    // 设置第一条数据为当前选中项
    selectOneTranslateRecordThis()
  }
})

/**
 * 选择翻译记录
 *
 * @param translateRecord 翻译记录
 */
const selectTranslateRecord = (translateRecord): void => {
  translateServiceRecordList.value = []
  translateRecordThis.value = isNull(translateRecord) ? new TranslateRecordVo() : translateRecord
  setTimeout(() => {
    // 加入延迟 否则显示的还是旧内容
    translateServiceRecordList.value = translateRecord?.translateServiceRecordList
  }, 1)
}

/**
 * 设置第一条数据为当前选中项
 */
const selectOneTranslateRecordThis = (): void => {
  const translateRecord = translateRecordList.value[0]
  selectTranslateRecord(translateRecord)
}
// 设置第一条数据为当前选中项
selectOneTranslateRecordThis()

/**
 * 刷新翻译记录
 */
const translateRecordListRefresh = (): void => {
  // 初始加载数据
  init()
  // 设置第一条数据为当前选中项
  selectOneTranslateRecordThis()
}

/**
 * 删除翻译记录
 */
const deleteTranslateHistory = (): void => {
  // 使用filter方法来创建一个新的数组，其中不包含id为2的对象
  translateRecordList.value = translateRecordList.value.filter((translateRecord) => {
    return translateRecord.requestId !== translateRecordThis.value.requestId
  })
  // 更新翻译记录
  updateTranslateRecordList(translateRecordList.value.slice().reverse())
  // 初始加载数据
  init()
  // 设置第一条数据为当前选中项
  selectOneTranslateRecordThis()
}

</script>

<style lang='scss' scoped>
@import '../../../../css/set';

.no-init-layer {
  margin-top: 130px;
}

.translate-history {
  display: flex;
  flex-direction: column;

  .prompt-span {
    padding-bottom: 10px;
  }

  .translate-service-layer {
    display: flex;
    max-height: 500px;
    min-height: 500px;

    .translate-service-div-block {
      .translate-service-edit {
        display: flex;
        align-items: center;
        margin-top: -6px;

        .translate-service-edit-button {
          margin-right: 10px;
        }
      }

      .translate-service-list-block {
        height: 460px;
        overflow: auto;
        background: var(--ttime-translate-service-color-background);
        margin-top: 0;
        border-radius: 8px;
        padding: 0;

        .translate-service-block {
          width: 186px;
          height: 39px;
          margin: 7px 10px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .translate-service-expansion-block {
            display: flex;
            justify-content: space-between;
          }

          &:hover.translate-service-block:not(.active) {
            background: var(--ttime-translate-service-block-hover-background);
          }

          &.active {
            background: var(--ttime-translate-service-block-active-background);
          }

          .left {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .translate-service-logo {
              width: 32px;
              border-radius: 8px;
            }

            .translate-service-name {
              max-width: 161px;
              font-size: 13px;
              padding-left: 5px;
              overflow: hidden;
              -webkit-line-clamp: 1;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }

  }
}

@import '../../../../css/translate.scss';


.translate-service-list-block::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.translate-service-list-block::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #c3c3c3;
}

.translate-service-list-block::-webkit-scrollbar-track {
  background-color: transparent;
}

</style>
